<template>
  <DynamicForm
    v-if="tempData"
    ref="form"
    :dataSource="tempData"
    :editable="formJson.editable"
    :dynamicData="{}"
    :formFields="formJson.fields"
    :sortedKeys="formJson.sortedKeys"
    :formConfig="{}"
    :showBtns="false"
    formLayout="vertical"
    class="pt16"
    style="max-width: 880px; margin: 0 auto"
    @change="dynamicChange($event, 'formJson')"
  />
</template>
<script>
import { basicsPagesForDycl } from "@/utils/dynamic";
import { formatValues, deFormatValues } from "./funcs";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    fieldList: {
      type: Array,
      default: () => []
    },
    editable: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Object,
      default: () => {}
    },
    isEmpInfo: {
      type: Boolean,
      default: false
    },
    isDetail: {
      // 详情页面需要从 content 中取值
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tempData: null,
      formJson: {},
      valueLst: []
    };
  },
  computed: {
    areaSourceMap() {
      return this.$store.state.common.areaSourceMap;
    }
  },
  watch: {
    dataSource: {
      handler(newVal) {
        this.initValues(newVal);
      },
      immediate: true
    },
    editable: {
      handler(newVal) {
        this.init();
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    async getValues() {
      // if (this.isEmpInfo) {
      //   const list = Object.keys(this.tempData).map((key) => {
      //     const keyId = key.split("_")[0];
      //     return {
      //       fieldId: keyId,
      //       content: this.tempData[key],
      //       subjectType: "dycl",
      //       subjectId: 0
      //     };
      //   });
      //   return list;
      // } else {
      const node = this.$refs.form;
      if (node) {
        const res = await node.saveActive();
        if (!res.success && res.error) {
          this.$message.warning("请按要求填写信息");
          return false;
        } else {
          const list = formatValues(res, this.formJson.fields, this.areaSourceMap);
          return list;
        }
      }
      return [];
      // }
    },
    initValues(values) {
      const tempValues = {};
      if (values && Object.keys(values).length > 0) {
        this.fieldList.forEach((item) => {
          if (item.isOpen) {
            const key = item.fieldCode || item.id + "";
            const configKey = `${item.id}_${item.fieldCode || ""}`;
            tempValues[configKey] = values[key];
          }
        });
      }
      this.tempData = tempValues;
    },
    init() {
      let fieldLst = this.fieldList;
      if (this.isEmpInfo && this.dataSource && Object.keys(this.dataSource).length > 0) {
        fieldLst = this.fieldList.map((item) => ({
          ...item,
          content: item.fieldCode ? this.dataSource[item.fieldCode] : null
        }));
      }
      const { fields, sortedKeys } = basicsPagesForDycl(null, "temp", fieldLst, this.isEmpInfo);
      this.formJson = {
        editable: this.editable,
        fields: fields,
        sortedKeys: sortedKeys
      };
      if (this.isDetail) {
        this.tempData = deFormatValues(this.fieldList, fields);
      }
    },
    dynamicChange(value, formJson) {
      // if (value) {
      //   const valueLst = formatValues(value, this[formJson]["fields"], this.areaSourceMap);
      // }
    }
  }
};
</script>
<style lang="scss"></style>
